<template>
  <div class="draw-img">
    <img v-if="showImg" :src="imgSrc" :alt="imgAlt">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgSrc: '',
      imgAlt: '',
      showImg: false
    }
  },
  props: {
    relativeId: {
      type: String,
      default: () => ''
    }
  },
  mounted() {
      if (this.relativeId !== '') {
          this.getImgSrc(this.relativeId)
      }
  },
  methods: {
    getImgSrc(relativeId) {
      const fileParams = {
        fileType: 'cs',
        dataSource: 'news',
        relativeId
      }
      this.$api.upload.getFileInfo(fileParams).then((res) => {
        if (res.code === 200) {
          if (res.data.length > 0) {
            const config = {
              timeout: 300000,
              responseType: 'blob'
            }
            this.$api.upload
              .getFileByKey({ objectKey: res.data[0].docPath }, config)
              .then((bobRes) => {
                const blob = new Blob([bobRes])
                const src = window.URL.createObjectURL(blob)
                this.imgSrc = src
                this.imgAlt = res.data[0].docName
                this.showImg = true
              })
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.draw-img{
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
      vertical-align: middle;
    }
}
</style>
